import { useState } from "react";
import { Calendar } from "react-vant";

const DataNav = () => {
  // 添加日历状态
  const [showCalendar, setShowCalendar] = useState(false);

  // 获取今天的日期
  const today = new Date();
  // 获取一个月后的日期
  const oneMonthLater = new Date(today);
  oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);

  // 格式化日期
  const formatDate = (date) => {
    const d = new Date(date);
    const year = d.getFullYear();
    const month = String(d.getMonth() + 1).padStart(2, "0");
    const day = String(d.getDate()).padStart(2, "0");
    return `${year}年${month}月${day}日`;
  };

  // 添加日历状态，设置默认值为今天到一个月后
  const [dateRange, setDateRange] = useState({
    startDate: formatDate(today),
    endDate: formatDate(oneMonthLater),
  });

  // 处理日期选择
  const onConfirm = (values) => {
    const [start, end] = values;
    setDateRange({
      startDate: formatDate(start),
      endDate: formatDate(end),
    });
    setShowCalendar(false);
  };

  return (
    <>
      {/* 添加日期显示和选择按钮 */}
      <div
        onClick={() => setShowCalendar(true)}
        style={{
          display: "flex",
          alignItems: "center",
          cursor: "pointer",
          padding: "8px",
          border: "1px solid #eee",
          borderRadius: "4px",
        }}
      >
        <span style={{ marginRight: "8px" }}>📅</span>
        <span
          style={{ fontWeight: "400" }}
        >{`${dateRange.startDate}-${dateRange.endDate}`}</span>
      </div>

      {/* 日历选择弹窗 */}
      <Calendar
        visible={showCalendar}
        onClose={() => setShowCalendar(false)}
        type="range"
        defaultValue={[
          new Date(dateRange.startDate),
          new Date(dateRange.endDate),
        ]}
        onConfirm={onConfirm}
        minDate={new Date(2024, 0, 1)}
        maxDate={new Date(2026, 11, 31)}
        style={{
          "--rv-calendar-selected-day-background-color": "#1989fa",
          "--rv-calendar-range-edge-background-color": "#1989fa",
          "--rv-calendar-range-middle-background-color": "#e6f3ff",
        }}
      />
    </>
  );
};
export default DataNav;
